<template>
	<view class="container">
		<view class="search_box">
			<image src="../../../static/index/search.png" mode="" @click="search"></image>
			<input class="input" type="text" v-model="text" placeholder="请输入关键字" placeholder-style="font-size:24rpx; color:#999" />
		</view>
		<view class="screen">
			<view class="middle" :class="{'left':type==0}" @click="settype(0)">推荐</view>
			<view class="middle distance" :class="{'left':type==1}" @click="settype(1)">新品</view>
			<view class="right" @click="value=true" v-if="cityshow==true">
				<text>{{cityName}}</text>
				<u-icon name="arrow-down" color="#909090" size="20"></u-icon>
			</view>
		</view>
		<view class="product-box">
			<view class="product-item" v-for="(item,index) in list" @click="top(item.goodsId)">
				<image :src="item.picUrl" mode=""></image>
				<view class="product-title">{{item.name}}</view>
				<view class="product-price" v-if="item.isEnableGrade==0">{{item.retailIntegral}}积分</view>
				<view class="product-price" v-if="item.isEnableGrade==1">￥{{item.retailPrice}}</view>
				<view class="product-price" v-if="item.isEnableGrade==2">￥{{item.retailPrice}}+{{item.retailIntegral}}积分
				</view>
			</view>
		</view>
		<view v-if="list.length==0" class="noimg">
			<image src="../../../static/noimg/nonews.png" mode=""></image>
		</view>
		<cityselect  v-model="value" @city-change="cityChange" @isshow="value=false"></cityselect>
	</view>
</template>

<script>
	import {fpgoods} from"../../../api/index.js"
	import cityselect from"../../../components/qycity.vue"
	export default{
		data(){
			return{
				name:"",
				id:"",
				num:1,
				text:"",
				type:0,
				list:[],
				cityshow:false,
				value:false,
				cityName:'全国',
				cityId:""
			}
		},
		components:{
			cityselect
		},
		onLoad(e) {
			if(e.id){
				this.id=e.id
			}
			if(e.type){
				this.cityshow=true
			}
			this.getlist()
		},
		onShow() {
		},
		onReachBottom() {
			this.getlist()
		},
		methods:{
			async getlist(){
				let data={
					pageSize:10,
					pageNum:this.num
				}
				if(this.id!=''){
					data.enterpriseId=this.id
				}
				if(this.type==1){
					data.type=1
				}
				if(this.text.trim()!=''){
					data.goodsName=this.text
				}
				if(this.cityId!=''){
					data.cityId=this.cityId
				}
				let res=await this.get(fpgoods,data)
				this.num++
				this.list=[...this.list,...res.data]
			},
			settype(e){
				this.type=e
				this.list=[]
				this.num=1
				this.getlist()
			},
			search(){
				console.log(111)
				this.list=[]
				this.num=1
				this.getlist()
			},
			// 选择城市
			cityChange(e) {
				console.log(e)
				this.cityName=e.name
				this.cityId=e.regionId
				this.list=[]
				this.num=1
				this.getlist()
			},
			top(id){
				uni.navigateTo({
					url:"/pages/product/product?id="+id
				})
			}
		}
	}
</script>

<style lang="less">
	.right{
		font-size: 24rpx;
		color: #999999;
		position: absolute;
		right: 30rpx;
		text{
			margin-right: 10rpx;
		}
	}
	.noimg{
		width:750rpx;
		height: 70vh;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 300rpx;
			height: 400rpx;
		}
	}
	.container{
		// padding: 0 30rpx;
		// padding-left: 30rpx;
		// padding-right: 30rpx;
		padding-top: 140rpx;
	}
	.search_box{
		width: 750rpx;
		height: 60rpx;
		position: fixed;
		left: 0;
		top:0;
		z-index: 99;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		display: flex;
		align-items: center;
		border-radius: 29rpx;
		background-color: #FFFFFF;
		justify-content: center;
		z-index: 99;
		image{
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 50rpx;
			z-index: 99;
		}
	}
	.input{
		width:690rpx;
		height: 50rpx;
		border: 1px solid #F09238;
		border-radius: 40rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}
.screen{
		width: 750rpx;
		position: fixed;
		left: 0;
		display: flex;
		align-items: center;
		height: 60rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		top:50 ;
		z-index: 99;
		/* #ifdef H5 */
		top: 146rpx;
		/* #endif */
	}
	
	.middle{
		font-size: 24rpx;
		color: #999999;
	}
	.left{
		font-size: 28rpx;
		color: #F09238;
	}
	.distance{
		margin-left: 40rpx;
	}
	.product-box{
		width: 750rpx;
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.product-item{
		width: 330rpx;
		height: 438rpx;
		margin-left: 30rpx;
		margin-bottom: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx rgba(4, 0, 0, 0.08);
		border-radius: 14rpx;
		image{
			width: 330rpx;
			height: 306rpx;
		}
	}
	.product-title{
		margin-left: 20rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #000000;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.product-price{
		margin-left: 20rpx;
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #F0812D;
	}
</style>
